<script setup lang="ts">
import { useChannelStore } from '@/stores/channel';
import type { axiosResData, ChannelData, ChannelItem } from '@/types/type';
import axios from 'axios';
import { onMounted, ref } from 'vue';
// defineProps<{
//   channelId: number
// }>()

// defineEmits<{
//   'update:channelId': [channelId: number]
// }>()
const store=useChannelStore()
const list = ref<ChannelItem[]>([]);
const getData = async () => {
  const res = await axios.get<axiosResData<ChannelData>>('http://geek.itheima.net/v1_0/channels')
  console.log(res);
  list.value = res.data.data.channels
}


onMounted(() => {
  getData()
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active:  store.channelId === item.id }" 
      href="javascript:;" v-for="(item, i) in list"
       :key="item.id" @click="store.updateChannelId(item.id)">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>